<template>
  <div>
    <div class="d-flex justify-content-between align-items-center">
      <h4 style="font-size: 1.142857rem">通知公告</h4>
      <el-button type="text" @click="handleView" class="p-0">更多 >></el-button>
    </div>
    <div v-if="!tableData.length" class="p-5 text-center text-muted rounded">暂无通知公告</div>
    <ul class="list-unstyled px-2 text-sm">
      <li v-for="(p, index) of tableData" :key="index">
        <div class="d-flex p-2">
          <div
            @click="handleDetail(p)"
            :title="p.notice_placard_title"
            class="text-primary cursor-pointer text-truncate"
          >
            {{ p.notice_placard_title }}
          </div>
          <div class="flex-1 text-right text-nowrap ml-2 text-muted">
            {{ $utils.dateFormat(p.create_time, 'yyyy-MM-dd') }}
          </div>
        </div>
      </li>
    </ul>

    <panel-notice-detail :visible.sync="detailVisible" :form-data="formData"></panel-notice-detail>
    <panel-notice-list :visible.sync="listVisible"></panel-notice-list>
  </div>
</template>

<script>
import PanelNoticeDetail from '@/credit/views/city/index/PanelNoticeDetail'
import PanelNoticeList from '@/credit/views/city/index/PanelNoticeList'
export default {
  components: {
    PanelNoticeDetail,
    PanelNoticeList,
  },
  data() {
    return {
      order: { create_time: 'desc' },
      params: {
        index: 1,
        size: 5,
      },
      tableCount: 0,
      tableData: [],
      loading: false,
      tableName: 'notice_placard',
      detailVisible: false,
      formData: {},
      listVisible: false,
    }
  },
  computed: {
    clientId() {
      return this.$store.getters.clientId
    },
  },

  created() {
    this.params['orWhere.service_id.eq'] = [this.clientId, 'all']
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      this.$api
        .getData('credit', this.tableName, this.params, this.order)
        .then(res => {
          this.tableData = (res && res.data && res.data.data) || []
          this.tableCount = (res && res.data && res.data.totalCount) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView() {
      this.listVisible = true
    },
    handleDetail(p) {
      this.detailVisible = true
      this.formData = p
    },
  },
}
</script>
<style lang="scss" scoped>
.text-sm {
  font-size: 0.85rem;
}
</style>
